<template>
    <div class="caiputzh">
        <div class="imgs"  >
      <img
        src = "https://cp1.douguo.com/upload/caiku/3/4/d/600_34f9940e5c37b235d003b9b90cd39d6d.jpeg"
        alt=""
      />
    </div>
    <div class="addpad">
      <div class="title">
        <div class="back">
          <van-icon name="arrow-left" size="30px" color="white" @click="back()" />
        </div>
        <div class="share">
          <div class="icon">
            <van-icon name="friends" size="30px" color="white" />
          </div>
          <div class="icon">
            <van-icon name="wechat" size="30px" color="white" />
          </div>
          <div class="icon">
            <van-icon name="ellipsis" size="30px" color="#ffffff" />
          </div>
        </div>
      </div>

      <div class="content" >
        <div class="thename"><h2></h2></div>
        <p>精品·独家·浏览4169·收藏2</p>
      </div>

      <div class="author"  >
        <div class="aulef">
          <div class="auimg">
            <img
              src= "http://tx1.douguo.net/upload/photo/5/6/0/70_u12157371987027015022.jpeg"
              alt=""
            />
          </div>
          <div class="auname">尤奈儿</div>
          <div class="lv">LV.3</div>
        </div>
        <div class="aurig">
          <div class="guanzu">关注</div>
        </div>
      </div>
      <div class="foodtitle" ><h3></h3></div>
      <div class="footlist">
        <div class="foottoplis">
          <div class="listlef"><h2>食材清单</h2></div>
          <div class="lisrig">加入采购清单</div>
        </div>
        <div class="detail" >
          <div class="detlef"><h3></h3></div>
          <div class="detrig"><h3></h3></div>
        </div>
        
        <div class="cookingdet">
          <div class="cooktitle">
            <h2>烹饪步骤</h2>
          </div>
          <div class="begincook"  >
            <div class="buzou"  >步骤  </div>
            <div class="cookimg" >
              <img src="" alt="" />
              <p ></p>
            </div>
            
          </div>
          <h2>完美出锅</h2>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
    export default {
        name:"Caiputzh",
        data() {
    return {
        count: 10,
        isLoading: false,
         //热门的内容
        productDataact:[],
        //搜索的内容
        productSearch:[],
      
        tabIndex:0,
   
      
      value: "",
      productListRst:[], //产品列表
     //   productListRst:{},//搜索筛选之后的列表
    };
  },
  created() {
    this.GetRecommend();
    // console.log(this.value);
    let va = this.$route.query.value;
    console.log('wo是va',va);
    this.GetRecommend(va)
  
  },
  methods: {
    //默认返回上一级
    back() {
      this.$router.push({ name:"Home"});
    },

    clicsearch(){
      this.$router.push({ name:"Caiputzh"});
    },
    getValue(){
        let va = this.value;
        console.log('这个是value',va);
    },

    GetRecommend(va){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/recipe/search?keyword=${va}`,
        //get请求参数写在params中
        query: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          recipeid:"3145896",
          keyword:"土豆饼",
          order:"0",
          type:"0",
          offset:"0",
          limit:"20",
        },

        // params: {
        //   appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        //   recipeid:"3145896",
        // },
      })
        .then((result) => {
        //   console.log("result土豆==>", result);
          this.productDataact = result.data.result.list;
        //   console.log(this.productDataact);
        //   this.productDataaend = result.data.list;
          
        //   console.log(" this.productDataact==>", this.productDataact);
   
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },
    }
    }
</script>

<style lang="less" scoped>
 
  .imgs {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      z-index: 999;
    }
  }
  .addpad {
    padding: 10px;

    .title {
      
      position: absolute;
      top: 30px;
      display: flex;
      align-items: center;

      .share {
        position: relative;
        left: 98%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon {
          margin-right: 20px;
        }
      }
    }
    .content {
      .thename {
        h2 {
          color: #2a2a2a;
          font-weight: 800;
          margin-bottom: 0;
        }
      }
      p {
        margin-top: 6px;
        margin-bottom: 30px;
      }
    }
    .author {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .aulef {
        display: flex;
        align-items: center;
        justify-content: center;
        .auimg {
          overflow: hidden;
          box-sizing: border-box;
          img {
            padding-left: 5px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
          }
        }
        .auname {
          padding-left: 5px;
          font-size: medium;
          font-weight: 800;
          color: #2a2a2a;
        }
        .lv {
          margin-left: 8px;
          font-weight: 900;
          font-size: smaller;
          color: #d7b96a;
          font-style: oblique;
        }
      }
      .aurig {
        .guanzu {
          margin-right: 8px;
          padding: 4px 20px;
          background-color: #ffc533;
          color: #3d382b;
          border-radius: 15px;
          text-align: center;
          line-height: normal;
          font-size: medium;
          font-weight: 900;
        }
      }
    }
    .foodtitle {
      h3 {
        margin: 25px 0;
      }
    }
    .footlist {
      .foottoplis {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .listlef {
          color: #2a2a2a;
          font-size: small;
          font-weight: 800;
        }
        .lisrig {
          color: #5598a1;
        }
      }
      .detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        color: #5b9da5;
        .detlef {
          font-weight: 500;
          color: #5b9da5;
          h3 {
            margin-top: 0;
          }
        }
        .detrig {
          font-weight: 500;
          color: #4d4d4d;
          h3 {
            margin-top: 0;
          }
        }
      }
      .cookingdet {
        .cooktitle{

        }
        .begincook{
           .buzou{
              font-size: 16px;
              font-weight: 900;
              margin: 15px 0;
           } 
           .cookimg{
            overflow: hidden;
            box-sizing: border-box;
            img{
            object-fit: cover;
            display: block;
            height: 350px;
            width: 355px;
            }
            p{
                font-size: large;
                font-weight: 600;
                color: #2d2d2d;
            }

           }
        }
      }
    }
  }
</style>